<template>
  <echarts class="bi-bar" :option="option" />
</template>
<script setup>
import echarts from "@/components/echarts/index.vue"
import { options } from "@/components/echarts/echarts"
import { useVisual } from "@/hooks/userEditor"
const { commonStyle } = useVisual()
const attrs = useAttrs()
const option = attrs.option
const { dimension, measure } = attrs.data
const echartRef = ref(null)
let setOptions = {}
let dataset = {
  dimensions: [],
  source: []
}
const init = () => {
  const settings = g.Copy(option)
  setOptions = options(settings)
  setOptions.dataset = dataset
  setOptions.series = measure.map((m, i) => {
    return {
      type: "bar"
    }
  })
  echartRef.value.init(setOptions)
}
watch([option, commonStyle], () => {
  init()
})
// 对外暴露的方法，接收外部传入的数据
const update = (data) => {
  dataset = {
    dimensions: [...dimension.map((i) => i.alias), ...measure.map((i) => i.alias)],
    source: data.data
  }
  init()
}
defineExpose({
  update
})
</script>
<style scoped lang="less">
.bi-bar {
  width: 100%;
  height: 100%;
}
</style>
